<template>
	<view class="home-page">
		<!-- 搜索框 -->
		<form action="/">
		  <van-search
		    v-model="value"
		    show-action
		    placeholder="请输入搜索关键词"
		    @search="onSearch"
		    @cancel="onCancel"
		  />
		</form>

		<!-- 轮播图 -->
		<van-swipe :autoplay="3000" lazy-render style="height: 380rpx;">
		  <van-swipe-item v-for="image in images" :key="image" >
		    <img :src="image" style="width: 100%;height: 380rpx;" />
		  </van-swipe-item>
		</van-swipe>
		<!-- 分类导航 -->
		<view class="item-list">
			<view class="item">
				<image src="../../static/imgs/999.jpg" mode=""></image>
				<span>感冒发烧</span>
			</view>
			<view class="item">
				<image src="../../static/imgs/green.avif" mode="" style="width: 100rpx;height: 80rpx;"></image>
				<span>保肝护肝</span>
			</view>
			<view class="item">
				<image src="../../static/imgs/eys.avif" mode=""></image>
				<span>心脑血管</span>
			</view>
			<view class="item">
				<image src="../../static/imgs/brain.avif" mode=""></image>
				<span>皮肤用药</span>
			</view>
			<view class="item">
				<image src="../../static/imgs/liver.avif" mode=""></image>
				<span>风湿骨科</span>
			</view>
			<view class="item">
				<image src="../../static/imgs/repair.avif" mode=""></image>
				<span>滋补用药</span>
			</view>
			<view class="item">
				<image src="../../static/imgs/calcium.avif" mode=""></image>
				<span>维钙营养</span>
			</view>
			<view class="item">
				<image src="../../static/imgs/stomach.avif" mode=""></image>
				<span>消化用药</span>
			</view>
			<view class="item">
				<image src="../../static/imgs/children.avif" mode=""></image>
				<span>儿童用药</span>
			</view>
			<view class="item">
				<image src="../../static/imgs/scorching.jpg" mode=""></image>
				<span>神经用药</span>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="home-text">
			<view class="text">
			<image src="../../static/heard.png" 
			style="width: 50rpx; height: 50rpx;"></image>	
			<h2>可能帮到你</h2>	
			</view>
			
			<view class="goods">
				<view class="good-list" @click="goinfo(v.id)" :key="k" v-for="v,k in goods">
					<image 	:src="v.image" mode=""></image>
					<p class="good-name">{{v.name}}</p>
					<p class="good-info">{{v.effect}}</p>
					<p class="good-price">￥{{v.price}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {computed, ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app';
import api from '../../lib/request.js'
import {useStore} from 'vuex'
import { showToast } from 'vant';

const store = useStore()
let value = ref('')
let goods = ref([])
let images = ref([
	 '../../static/one.jpg/',
	 '../../static/two.png',
	 '../../static/thr.png'
])


function onSearch(val){
	api.get('/medicine/findAllByName',{name:val}).then(res=>{
		console.log(res);
	})
}

const onCancel = () => showToast('取消');
// 初始化页面
onLoad(()=>{
	api.get('/medicine/findAll').then(res=>{
			goods.value = res.data		
		})
})
	

// 前往详情页
function goinfo(id){
	uni.navigateTo({
		url: "/pages/info/info?id="+id
	})
} 

</script>

<style >
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color:#00ACEE;
  }	
  /* 分类导航 */
  .item-list{
	  /* height: 150rpx; */
	  padding: 10rpx;
	  display: flex;
	  justify-content: space-around;
	  flex-wrap: wrap;
	  align-items: center;
  }
  .item{
	  width: 100rpx;
	  height: 100rpx;
	  font-size: 16rpx;
	  margin: 30rpx 20rpx;
	 display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
  }
  .item>image{
	 width: 80rpx;
	 height: 80rpx;
	 padding: 10rpx;
	 line-height: 100rpx;
  }
  /* 商品列表 */
  .text{
	  height: 60rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin-top: 20rpx;
  }
  .text>image{
	  margin-top: 11rpx;
  }
  h2{
	 text-align: center;
	 margin-top: 20rpx;
	 line-height: 60rpx;
	 margin-left: 20rpx;
  }
  .home-text{
	  width: 100vw;
	background-color: #eee;
	margin-top: 30rpx;
  }
  .goods{
	  padding: 10px;
	  /* border: 1px solid; */
	  display: flex;
	  justify-content: space-between;
	  flex-wrap: wrap;
  }
  .good-list{
	width: 310rpx;
	padding: 10px;
	text-align: center;
	background-color: #fff;
	margin: 10rpx 0;
  }
  .good-list>image{
	  width: 310rpx;
	  height: 300rpx;
  }
  .good-list>p{
	  display: flex;
  }
  .good-info{
	  margin-bottom: 20rpx;
	  color: #8a8a8a;
  }
  .good-price{
	  font-weight: bolder;
	  color: red;
  }
</style>